<template>
    <div class="tabbar">
        <div class="tabbar_left">
            <!--顶部左侧静态-->
            <el-tooltip
                :content="LayoutSettingStore.fold ? '展开好友列表' : '折叠好友列表'"
                effect="customized"
            >
                <el-icon style="margin-right: 0.625rem; cursor: pointer" @click="changeIcon">
                    <component :is="LayoutSettingStore.fold ? 'Expand' : 'Fold'"></component>
                </el-icon>
            </el-tooltip>
            <!--左侧面包屑-->
            <el-breadcrumb separator-icon="ArrowRight">
                <!--左侧面包屑动态展示路由图标与名字-->
                <el-breadcrumb-item :to="$route.meta.path">
                    <span>{{ $route.meta.title }}</span>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="tabbar_right">
            <el-tooltip content="刷新" effect="customized">
                <el-button
                    type="primary"
                    size="small"
                    :icon="Refresh"
                    circle
                    @click="updateRefresh"
                ></el-button>
            </el-tooltip>
            <el-tooltip content="全屏" effect="customized">
                <el-button
                    type="primary"
                    size="small"
                    :icon="FullScreen"
                    circle
                    @click="fullScreen"
                ></el-button>
            </el-tooltip>
            <el-tooltip content="设置" effect="customized">
                <el-button
                    type="primary"
                    size="small"
                    :icon="Setting"
                    circle
                    @click="onSettings"
                ></el-button>
            </el-tooltip>
            <!-- 设置弹出页 -->
            <SystemSettings v-model="visible"></SystemSettings>
            <!-- 头像 -->
            <img :src="userStore.avatar" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { FullScreen, Refresh, Setting } from '@element-plus/icons-vue'
import useLayoutSettingStore from '@/store/modules/layout'
import useUserStore from '@/store/modules/user'

//获取路由对象
let $route = useRoute()
//获取layout配置相关的仓库
let LayoutSettingStore = useLayoutSettingStore()
//获取用户相关的小仓库
let userStore = useUserStore()
//用于控制系统设置抽屉的显示与隐藏
let visible = ref<boolean>(false)

//点击图标的方法
const changeIcon = () => {
    LayoutSettingStore.fold = !LayoutSettingStore.fold
}

//点击刷新的方法
const updateRefresh = () => {
    LayoutSettingStore.refresh = !LayoutSettingStore.refresh
}

//点击切换全屏模式的方法
const fullScreen = () => {
    //DOM对象的一个属性：可以用来判断当前是不是全屏模式，是则为true，否则为false
    let full = document.fullscreenElement
    if (!full) {
        document.documentElement.requestFullscreen()
    } else {
        document.exitFullscreen()
    }
}

//点击进行系统设置的方法
const onSettings = () => {
    visible.value = true
}
</script>

<style scoped lang="scss">
.tabbar {
    width: 100%;
    min-width: $main-min-width;
    height: 100%;
    @include flex-layout(flex, normal, space-between);
    background-color: $base-tabbar-background;
    border-bottom: 2px solid rgb(214, 214, 214);
    border-left: 2px solid rgb(214, 214, 214);

    .tabbar_left {
        @include flex-layout(flex, center);
        margin-left: 1rem;

        span {
            font-size: 1.6rem;
            color: black;
            cursor: default;
        }
    }

    .tabbar_right {
        @include flex-layout(flex, center);

        img {
            width: 2rem;
            height: 2rem;
            margin: 0 1rem 0 0.625rem;
            border-radius: 1rem;
        }
    }
}

.el-popper.is-customized {
    padding: 2px 2px;
    background: linear-gradient(90deg, $system-default-theme-color, $system-default-theme-color);
    color: white;
}

.el-popper.is-customized .el-popper__arrow::before {
    background: linear-gradient(45deg, $system-default-theme-color, $system-default-theme-color);
    right: 0;
}
</style>
